<template>
<div class="brand">
	<el-card class="box-card" shadow="always">
	  <div slot="header" class="clearfix title-wrapper">
	    <span class="list-title">{{ brand }}</span>
	  </div>
	  <div class="list-wrapper">
	  	<div class="list-item" v-for="product in products">
	  		<a :href="'/mall/product/' + product.id">
          <el-image
            v-if="product.fromUrl"
            :src="product.imgPath"
            fit="fill">
          </el-image>
          <el-image
            v-else
            :src="require('@/assets/img/product/' + product.imgPath)"
            fit="fill">
          </el-image>
	  		</a>
	    	<span style="overflow: hidden; width: 160px; line-height: 22px; height: 44px; font-size: 14px;" class="demonstration">{{ product.description }}</span>
	    	<span style="line-height: 22px; width: 160px; font-size: 16px; color: #d44; font-weight: 900;" class="demonstration">{{ product.price }}.00</span>
	  	</div>
	  </div>
	</el-card>
</div>
</template>

<script>
export default {
	name: "Brand",
	created() {
		const _this = this;
		_this.$axios.get("/product-category/" + this.$route.params.id).then((res) => {
			const resData = res.data.data;
			_this.brand = resData.name;
		});
		_this.$axios.get("/product/for_brand/" + this.$route.params.id).then((res) => {
			const resData = res.data.data;
      for (let idx in resData) {
        let imgPath = resData[idx].imgPath;
        let fromUrl = false;
        if (imgPath.slice(0, 4) === "http") {
          fromUrl = true;
        }
        _this.products.push({
          id: resData[idx].id,
          name: resData[idx].name,
          description: resData[idx].description,
          price: resData[idx].price,
          stock: resData[idx].stock,
          speciesId: resData[idx].pcId,
          brandId: resData[idx].pcChildId,
          imgPath: imgPath,
          fromUrl: fromUrl
        })
      }
		});
	},
	data() {
		return {
			brand: "",
			products: []
		}
	}
}
</script>

<style scoped>
.brand {
	width: 1242px;
}

.title-wrapper {
	display: flex; justify-content: center;
}

.list-title {
	font-weight: bold;
}

.list-wrapper {
	display: flex; 
	flex-wrap: wrap;
}

.list-item {
	margin: 20px; 
	display: flex; 
	flex-direction: column;
}

.el-image {
	width: 150px; 
	height: 150px; 
	margin: 5px;
}
</style>